<%@ page import="team.bluepen.supermarket.data.dao.UserRepository" %>
<%@ page import="java.util.List" %>
<%@ page import="team.bluepen.supermarket.data.entity.User" %>
<%@ page import="java.io.IOException" %>
<%@ page import="team.bluepen.supermarket.util.Log" %>
<%@ page import="team.bluepen.supermarket.constant.Constant" %>
<%@ page import="team.bluepen.supermarket.constant.Role" %>
<%@ page import="team.bluepen.supermarket.constant.Error" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="team.bluepen.supermarket.util.IdGenerator" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%
    User user = (User) request.getSession().getAttribute(Constant.SESSION_USER);
    Error error = null;
%>
<%!
    UserRepository repository = new UserRepository();
    final List<User> users = new ArrayList<>();
    void reloadUsers() {
        users.clear();
        try {
            users.addAll(repository.query());
        } catch (IOException e) {
            Log.e(e);
        }
    }
%>
<%
    reloadUsers();
%>
<!DOCTYPE html>
<html lang="en">
<head>
<%-- 管理员管理账号页面 --%>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/icon.ico" type="/image/x-icon" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css">
    <script src="${pageContext.request.contextPath}/js/bootstrap.bundle.js"></script>
    <title>Account - Supermarket Manage System</title>
</head>
<body>
<main>
    <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" style="width: 20%;min-width: 150px">
        <a href="${pageContext.request.contextPath}/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
            <span class="fs-4">Supermarket Manage System</span>
        </a>
        <hr>
        <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item">
                <a href="overview.jsp" class="nav-link link-dark" aria-current="page">
                    Overview
                </a>
            </li>
            <%
                if (user != null && user.getRole() == Role.ADMIN) {
            %>
            <li>
                <a href="account.jsp" class="nav-link active">
                    Accounts
                </a>
            </li>
            <%
                }
            %>
            <li>
                <a href="manage.jsp" class="nav-link link-dark">
                    All Goods
                </a>
            </li>
            <li>
                <a href="query.jsp" class="nav-link link-dark">
                    Goods Query
                </a>
            </li>
            <li>
                <a href="file.jsp" class="nav-link link-dark">
                    File
                </a>
            </li>
        </ul>
        <hr>
        <div class="dropdown">
            <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
                <strong><%=user.getUsername()%></strong>
            </a>
            <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
                <li><a class="dropdown-item" href="setting.jsp">Settings</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><form method="post" action="api/logout-control">
                    <button class="dropdown-item" type="submit" value="logout" name="logout">Logout</button>
                </form></li>
            </ul>
        </div>
    </div>

    <%
        String state = request.getParameter("error");
        if (state != null) {
            error = Error.getErrorByText(state);
        }
    %>
    <%   if (error != null && !error.getState()) {%>
    <script>alert('Data error! \n<%=error%>' )</script>
    <%
        }
    %>
    <% if (error != null && error.getState()) {
        user = repository.query(user.getRow());
        request.setAttribute(Constant.SESSION_USER, user);
    }%>

    <div class="d-flex flex-grow-1 p-4 allow-rolling">
        <div class="d-flex flex-column flex-grow-1">
            <div class="d-flex flex-row">
                <h1 class="flex-column flex-grow-1">Accounts</h1>
            </div>
            <div class="flex-grow-1">
            <table class="table table-hover">
                <thead class="table table-hover" >
                <tr><th>Username</th>
                    <th>Password</th>
                    <th>Role</th>
                    <th>ID</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                <%
                    for (User u: users){
                %>
                <tr>
                    <td><%=u.getUsername()%></td>
                    <td><%=u.getPassword()%></td>
                    <td><%=u.getRole()%></td>
                    <td><%=u.getId()%></td>
                    <td>
                        <div class="btn-group">
                            <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#edit_user" data-bs-userrow="<%=u.getRow()%>" data-bs-username="<%=u.getUsername()%>">Edit</button>
                            <button class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#delete_user" data-bs-userrow="<%=u.getRow()%>" data-bs-username="<%=u.getUsername()%>">Delete</button>
                        </div>
                    </td>
                </tr>
                <%}
                %>
                </tbody>
            </table>
                <button type="button" class="flex-column btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#add_user">Add User</button>
                <button type="button" class="flex-column btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#redirect_id">Redirect ID</button>
            </div>
        </div>


        <div class="modal fade" id="add_user">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Add User</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form action="api/user-add" method="post" name="edit_username_form">
                        <div class="modal-body">
                            <label for="add_username_input">Username</label><input type="text" class="form-control text-input" name="user_username" id="add_username_input" placeholder="Type a username..." >
                            <label for="add_password_input">Password</label><input type="password" class="form-control text-input" name="user_password" id="add_password_input" placeholder="Type a password..." >
                            <label for="add_role_select">Role</label>
                            <select class="form-select" name="user_role" id="add_role_select">
                                <option value="user">User</option>
                                <option value="admin">Admin</option>
                                <option value="Guest">Guest</option>
                            </select>

                        </div>

                        <div class="modal-footer">
                            <div class="btn-group">
                                <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Confirm</button>
                                <button type="reset" class="btn btn-outline-secondary">Reset</button>
                                <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Cancel</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>


        <div class="modal fade" id="delete_user">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Delete User</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form action="api/user-delete" method="post" name="delete_username_form">
                        <div class="modal-body">
                            <input type="text" name="user_row" id="delete_user_row" hidden value="">
                            <div class="alert alert-danger">
                                Notice:<br>
                                <strong>You are now going to delete this user from database, please check it again!</strong>
                            </div>
                            <p id="current_username_delete"></p>
                        </div>

                        <div class="modal-footer">
                            <div class="btn-group">
                                <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">Delete</button>
                                <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="edit_user">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Edit User</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form action="api/setting-control" method="post" name="edit_username_form">
                        <div class="modal-body">
                            <input type="text" name="user_row" id="edit_user_row" hidden value="">
                            <div class="alert alert-warning">
                                Notice:
                                <br>If you don't want to change the username or anything else, please just leave it blank.
                                <br><br><strong>Also note: the role must be set manually, otherwise it will be set as an ordinary user.</strong>
                            </div>
                            <p id="current_username_edit"></p>
                            <hr>
                            <label for="edit_username_input">Username</label><input type="text" class="form-control text-input" name="edit_username" id="edit_username_input" placeholder="Type a new username..." >
                            <label for="edit_password_input">Password</label><input type="password" class="form-control text-input" name="edit_password" id="edit_password_input" placeholder="Type a new password..." >
                            <label for="edit_role_select">Role</label>
                            <select class="form-select" name="edit_role" id="edit_role_select">
                                <option value="user">User</option>
                                <option value="admin">Admin</option>
                                <option value="Guest">Guest</option>
                            </select>

                        </div>

                        <div class="modal-footer">
                            <div class="btn-group">
                                <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Confirm</button>
                                <button type="reset" class="btn btn-outline-secondary">Reset</button>
                                <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Cancel</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="redirect_id">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Redirect ID</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form action="api/id-redirect" method="post" name="redirect_id">
                        <div class="modal-body">
                            <p>Used to modify the ID currently generated automatically.</p>
                            <div class="alert alert-danger">
                                Notice:<br>
                                <strong>Don't use this function unless you know what you're doing!</strong>
                            </div>
                            <div class="alert alert-primary">
                                The minimum value of ID is 1. If you enter any number lower than this value, it will change to 1.
                            </div>
                            <p>Current ID: <%=IdGenerator.getNowId()%></p>
                            <hr>
                            <input type="number" name="new_id" class="form-control text-input flex-grow-1" placeholder="Type a new id...">
                        </div>

                        <div class="modal-footer">
                            <div class="btn-group">
                                <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Confirm</button>
                                <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">Reset</button>
                                <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</main>
<script>
    const editUserModal = document.getElementById('edit_user');
    editUserModal.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        const userRow = button.getAttribute('data-bs-userrow');
        const userName = button.getAttribute('data-bs-username');
        const userRowInput = document.getElementById("edit_user_row");
        const usernameCurrent = document.getElementById("current_username_edit");
        userRowInput.value = userRow;

        usernameCurrent.innerHTML = "Current username: " + userName;
    })

    const deleteUserModel = document.getElementById("delete_user");
    deleteUserModel.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        const userRow = button.getAttribute('data-bs-userrow');
        const userName = button.getAttribute('data-bs-username');
        const userRowInput = document.getElementById("delete_user_row");
        const usernameCurrent = document.getElementById("current_username_delete");
        userRowInput.value = userRow;
        usernameCurrent.innerHTML = "Current username: " + userName;
    })
</script>

</body>
</html>
